<!DOCTYPE html>
<html>
<head>
  <title>p2p</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="js/vendor/jquery.mobile-1.0.min.css" />
  <script type="text/javascript" src="js/vendor/jquery-1.6.4.min.js"></script>
  <script type="text/javascript" src="js/vendor/jquery.mobile-1.0.min.js"></script>
  <script type="text/javascript" src="js/p2p.js"></script>
</head>
<body>
  <div id="pageMenu" data-role="page">
    <div data-role="header">
      <h1>Welcome to p2p game.</h1>
    </div>
    <div id="pageMenuContent" data-role="content" height="100%">
      <a href="#pageGame" data-role="button" data-rel="page" data-transition="slide">start game</a>
      <a href="#" data-role="button">exit</a>
    </div>
  </div>

  <div id="pageGame" data-role="page" data-transition="flip">
    <div id="pageGameContent" data-role="content">
      <div id="playground">
        <div id="ball"></div>
        <div id="paddle"></div>
      </div>
    </div>
    <div id="pageFooter" data-role="footer">
      <p><a href="#pageMenu" data-role="button" data-theme="c" data-inline="true" data-direction="reverse">back to menu</a></p>
    </div>
  </div>
</body>
</html>